#projects {

	.project-list {
		margin-top: 20px;
	}

	.project {
		float: left;
		width: 30%;
		margin: 0 10px;
		margin-bottom: 25px;
		padding: 13px;
		border: 1px solid #E4EAF1;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
		border-radius: 5px;
		min-height: 227px;
		position: relative;

		@media (max-width: $maxMedium) {
			width: 43%;
		}

		@media (max-width: $maxSmall) {
			width: 94%;
		}

		&.new {
			border: 2px dotted #BEDAF8;
			box-shadow: none;

			a {
				display: block;
				text-align: center;
				text-decoration: none;
			}

			i {
				font-size: 60px;
				color: #C4DEF8;
				margin-top: 40px;
				display: block;
			}

			.info {
				display: inline-block;
				font-size: 21px;
				color: #9AC0E7;
				padding-top: 10px;
			}
		}

		.info {
			padding: 20px 0 30px;
			text-align: center;

			.name {
				font-size: 20px;
				color: #8C5DAC;
				color: #5D93AC;
				font-weight: 600;
			}

			.category {
				font-weight: 600;
				color: #444;
			}

			.last-update {
				font-size: 13px;
				color: #8C939E;
				margin-top: 7px;
			}
		}

		.members {
			position: absolute;
			bottom: 13px;
			width: 91%;

			img {
				margin: 0 3px 4px 3px;
				max-width: 38px;
				border-radius: 50%;
			}

			.add-more {
				display: inline-block;
				width: 20px;
				height: 20px;
				background: #22B92E;
				text-align: center;
				float: right;
				margin-top: 12px;
				color: #fff;
				border-radius: 3px;
				font-size: 10px;
				line-height: 22px;

				@include transition(all .15s linear);

				&:hover {
					background: #8BDBA1;
				}
			}

			.menu {
				position: absolute;
				right: -70px;
				bottom: 26px;
				background: #fff;
				width: 155px;
				z-index: 999;
				border-radius: 3px;
				padding: 7px 0;
				list-style-type: none;
				box-shadow: 0px 3px 11px rgba(0, 0, 0, 0.35);

				opacity: 0;
				@include transform(scale(0));
				@include transition(all 300ms cubic-bezier(0.34,1.61,0.7,1));
				@include transform-origin(50% 100%);

				&.active {
					opacity: 1;
					@include transform(scale(1));
				}

				&:hover {
					opacity: 1;
					@include transform(scale(1));
				}
				
				&:after {
					content: "";
					position: absolute;
					display: block;
					width: 37px;
					height: 12px;
					bottom: -12px;
					left: 49%;
					margin-left: -18.5px;
					background-image: url("#{$imagesPath}/popover-arrow.png");
					background-size: 100% 100%;
					@include transform(rotateX(180deg));
				}

				li {
					padding: 8px 0;
					border-bottom: 1px solid #E6E6E6;
					text-align: center;

					&:last-child {
						border-bottom: 0;
					}

					a {
						text-decoration: none;
						display: block;
						font-weight: 600;
						color: #54A0E2;

						@include transition(all .2s linear);

						&:hover {
							color: #333;
						}
					}
				}
			}
		}
	}

}